<template>
    <div class="pay-detail-wrap">
      <div class="pay-detail-header" v-if="header">
        <span>科室: {{ header.officeName }}</span>
        <span>房间号: {{ header.roomCode }}</span>
        <span>病人姓名: {{ header.name }}</span>
        <span>病人编号: {{ header.patientCode }}</span>
        <span>入院时间: {{ header.startTime }}</span>
        <el-button class="back-btn" @click="goBack" plain>返回</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%; margin: 0 auto; max-width: 1100px; background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,0.07);"
        empty-text="暂无明细"
      >
        <el-table-column prop="id" label="id" width="60" align="center" />
        <el-table-column prop="itemName" label="花费项目" align="center" />
        <el-table-column prop="itemType" label="花费类型" align="center" />
        <el-table-column prop="items" label="费用明细项" align="center" />
        <el-table-column prop="price" label="价格" align="center" />
        <el-table-column
          prop="isReimbursement"
          label="支付方式"
          align="center"
          :formatter="payTypeFormatter"
        />
      </el-table>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import http from '@/api/http.js'
  
  const route = useRoute()
  const router = useRouter()
  const payInfoId = route.query.payInfoId
  
  const tableData = ref<any[]>([])
  const header = ref<any>(null)
  
  const getDetail = async () => {
    const res = await http.get(`/api/Patient/GetPayItem?id=${payInfoId}`)
    if (res && res.data && res.data.length > 0) {
      tableData.value = res.data
      header.value = res.data[0]
    } else {
      tableData.value = []
      header.value = null
    }
  }
  
  const goBack = () => {
    router.back()
  }
  
  const payTypeMap: Record<string, string> = {
    '0': '微信',
    '1': '支付宝',
    '2': '银行卡'
  }
  const payTypeFormatter = (row: any) => payTypeMap[String(row.isReimbursement)] ?? row.isReimbursement
  
  onMounted(() => {
    getDetail()
  })
  </script>
  
  <style scoped>
  .pay-detail-wrap {
    padding: 40px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f7fafd;
    min-height: 100vh;
  }
  .pay-detail-header {
    display: flex;
    gap: 32px;
    align-items: center;
    margin-bottom: 24px;
    font-size: 16px;
    background: #fff;
    padding: 24px 32px;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  }
  .back-btn {
    margin-left: 32px;
  }
  .el-table {
    background: #fff;
    border-radius: 12px;
  }
  </style>